<template>
  <section>
    <el-row style="margin: -3px 0px 0px 1px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/system/dashboard' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>服务维修</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>

    <el-card style="margin: 18px 2%;width: 95%">
      <el-table
        :data="orderList"
        stripe
        style="width: 100%"
        :max-height="tableHeight">
        <!--Form-->
        <el-table-column prop="orderId" label="订单号" sortable/>
        <el-table-column prop="name" label="客户名" :formatter="customerFormatter"/>
        <el-table-column prop="phone" label="联系方式" fit :formatter="phoneFormatter"/>
        <el-table-column prop="category" label="需要服务" fit :formatter="categoryFormatter"/>
        <el-table-column prop="descrip" label="问题描述" fit/>
        <el-table-column prop="status" label="服务状态" fit>
          <template slot-scope="scope">
            <p v-if="scope.row.status===2" style="color:#ff0700">未开始</p>
            <p v-else-if="scope.row.status===3" style="color:#0feeff">进行中</p>
            <p v-else-if="scope.row.status===4" style="color:#949994">结束</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <el-tooltip content="添加明细" placement="bottom" effect="light">
              <el-button
                v-if="scope.row.status<=3"
                @click="editOrder(scope.row)"
                type="text"
                style="font-size: 16px"
                @reload="OrderList"
                icon="el-icon-edit"/>
            </el-tooltip>
            <el-tooltip content="查看明细" placement="bottom" effect="light">
              <el-button
                v-if="scope.row.status>=4"
                @click="editOrder(scope.row)"
                type="text"
                style="font-size: 16px"
                @reload="OrderList"
                icon="el-icon-s-claim"/>
            </el-tooltip>
            <el-tooltip content="确定" placement="bottom" effect="light">
              <el-button
                type="text"
                style="font-size: 16px"
                v-if="scope.row.status<=3"
                @click="confirmOrder(scope.row)"
                icon="el-icon-s-promotion"/>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-card>
    <item-detail ref="ItemDetail" @reload="OrderList"/>
  </section>
</template>

<script>

import ItemDetail from "./itemcomponent/ItemDetail";

export default {
  name: "ItemManagement",
  data() {
    return {
      orderList: [],
      size: 5,
      total: 0,
      page: 1,
      url: {
        OrderItemList: "/orders/OrderItemList",
        isNullItem: "/orders/item/checkItemIsNull"
      }
    }
  },
  components: {ItemDetail},
  mounted() {
    this.OrderList()
  },
  methods: {
    /*请求发送数据*/
    OrderList() {
      this.$axios.post(this.url.OrderItemList, {
        page: this.page,
        size: this.size,
      }).then(resp => {
        if (resp && resp.status === 200) {
          console.log(resp.data.result)
          this.orderList = resp.data.result
          this.total = resp.data.total
        }
      })
    },
    editOrder(order) {
      this.$refs.ItemDetail.dialogFormVisible = true
      this.$refs.ItemDetail.order = order
      // 当订单完成服务后，添加模块禁用，加载页面为详情，加载详情数据
      if (order.status > 3) {
        this.$refs.ItemDetail.itemAddHidden = true
        this.$refs.ItemDetail.candelete = true
        this.$refs.ItemDetail.confirmItemSubmit = true
        this.$refs.ItemDetail.activeName = 'itemDetail'
        this.$refs.ItemDetail.loadOrderItemDetail()
      }
    },
    confirmOrder: function (order) {
      this.$axios.post(this.url.isNullItem, order).then(resp => {
        if (resp.data.code === 400) {
          this.$confirm(resp.data.message, "提示", {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: "warning"
          }).then(() => {
            this.$axios.post('/orders/item/details', order).then(resp => { // 请求订单详情数据
              if (resp.data.code === 200) {
                var orderItem = resp.data.result
                this.$refs.ItemDetail.confirmItem(order, orderItem)
              }
            })
          })
        }
        if (resp.data.code === 200) {
          this.$axios.post('/orders/item/details', order).then(resp => { // 请求订单详情数据
            if (resp.data.code === 200) {
              var orderItem = resp.data.result
              this.$refs.ItemDetail.confirmItem(order, orderItem)
            }
          })
        }
      })
    },
    /*
    * 处理数据格式
    * */
    customerFormatter(row) {
      return row.customer.name
    },
    phoneFormatter(row) {
      return row.customer.phone
    },
    categoryFormatter(row) {
      let categorylist = row.category
      let result = []
      for (let categorylistKey in categorylist) {
        result.push(categorylist[categorylistKey].name + " ")
      }
      return result
    },

    handleCurrentChange(page) {
      this.page = page
      this.OrderList()
    },
    handleSizeChange(val) {
      this.size = val
      this.OrderList()
    },
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 320
    }
  },
}
</script>

<style scoped>

</style>
